<template>
    <div id="tap" class="demo">
        <button :class="['tab-button',{active:btn.enName === activiteBtnName}]" @click="handleClick(btn)" v-for="(btn,index) in buttons" :key="index">{{btn.cnName}}</button>
        <div class="tab" :is="componentName"></div>
        <slot></slot>
    </div>
</template>

<script>
    // 动态组件就是通过is属性来对组件进行切换
    // 语法： is="组件的名字"
    import change from '@/components/Tab/Change/index.vue'
    import email from '@/components/Tab/Email/index.vue'
    import home from '@/components/Tab/Home/index.vue'
    import mine from '@/components/Tab/Mine/index.vue'

    export default {
        data(){
            return{
                // 定义一个三方数据，当点击按钮的时候，将这个数据的值改成点击按钮的英文名
                // 举个栗子，当点击充值按钮的时候，就会将这个activiteBtnName，变成change
                activiteBtnName:"home",
                componentName:"tab-change",
                buttons:[
                    {
                        enName:'home',
                        cnName:'主页'
                    },
                    {
                        enName:'email',
                        cnName:'邮箱'
                    },
                    
                    {
                        enName:'change',
                        cnName:'充值'
                    },
                    {
                        enName:'mine',
                        cnName:'个人中心'
                    },
                ],
            }
        },
        components:{
            "tab-change": change,
            "tab-email": email,
            "tab-home": home,
            "tab-mine": mine,
        },
        methods:{
            handleClick(btn){
                // console.log(btn);
                this.activiteBtnName = btn.enName
            }
        }
    }
</script>

<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>
